<!doctype html>
<html>

	<head>
		<title>Socket.IO chat</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			body {
				font: 13px Helvetica, Arial;
			}
			
			form {
				background: #000;
				padding: 3px;
				position: fixed;
				bottom: 0;
				width: 100%;
			}
			
			form input {
				border: 0;
				padding: 10px;
				width: 90%;
				margin-right: .5%;
			}
			
			form button {
				width: 9%;
				background: rgb(130, 224, 255);
				border: none;
				padding: 10px;
			}
			
			#messages {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			
			#messages li {
				padding: 5px 10px;
			}
			
			#messages li:nth-child(odd) {
				background: #eee;
			}
		</style>
	</head>

	<body>
		<ul id="messages"></ul>
		<form action="">
			<input id="m" autocomplete="off" /><button>Send</button>
		</form>
	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
	<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
	<script>
		$(function() {
			$.post("/login", {
					username: "sam",
					password: "111111"
				},
				function(data, status, xhr) {
					console.log(data)
					if(data && data.msg == 'success') {
						sessionStorage.TOKEN = xhr.getResponseHeader('authorization');
						initIO();
					}
				});

		});

		function initIO() {
			console.log(io)
			/*var socket = io({
				extraHeaders: {
					Authorization: sessionStorage.TOKEN
				}
			});*/
			console.log(sessionStorage.TOKEN)
			const socket = io({
				transportOptions: {
        polling: {
            extraHeaders: {
                'authorization': sessionStorage.TOKEN
            }
        }
    }
			});
			console.log(socket);
			$('form').submit(function() {
				socket.emit('chat message', $('#m').val());
				$('#m').val('');
				document.write('Yes')
				return false;
			});
		}
	</script>

</html>